<!-- 侧边栏 -->
<script setup lang="ts">
import MoonSun from "./plugs/moonSun.vue";
import ColorSet from "./plugs/colorSet.vue";
import Directory from "./plugs/directory.vue";
import AutoText from "./plugs/autoText.vue";
import { useRouter } from "vue-router";
const router = useRouter();
</script>
<template>
    <div class="aside-warp">
        <div class="author hover-box-shadow">
            <img class="avatar" src="../assets/imgs/avatar.jpeg" alt="" />
            <div class="nickName">青 松</div>
            <div class="major">计算机科学与技术</div>
            <div class="major">2017-2022</div>
            <MoonSun />
            <ColorSet />
            <AutoText />
        </div>
        <!-- <Directory v-show="router.currentRoute.value.path == '/read'" style="margin-top: 20px" /> -->
    </div>
</template>
<style lang="scss">
.aside-warp {
    .el-collapse-item__wrap {
        border: none !important;
    }

    .el-collapse {
        border: none !important;
    }
}
</style>
<style scoped lang="scss">
.aside-warp {
    border: 1px #e6e6e6 solid;
    border-radius: 5px;
    & > div {
        padding: 20px;

        .title {
            display: flex;
            align-items: center;
        }
    }

    & > div:nth-child(1) {
        margin-top: 0;
    }

    .author {
        align-items: center;
        display: flex;
        flex-direction: column;

        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 999px;
            box-shadow: 0px 0px 10px 0px rgba($color: #000000, $alpha: 0.5);
            transition: 1s;
            margin-bottom: 10px;

            &:hover {
                transform: rotate(360deg);
            }
        }

        .nickName {
            font-size: 16px;
            font-weight: 700;
            color: var(--el-color-primary);
        }
    }

    .set {
        margin-bottom: 20px;
        box-sizing: border-box;
        transition: all 0.5s;
    }
}
</style>
